import { Input, InputProps, Form } from "antd"
import IconFont from "../../IconFont"

interface SearchProps extends InputProps {
  onFresh?(): void
  fieldName?: string
}

export function SearchBar({
  onFresh,
  fieldName = "search",
  ...props
}: SearchProps) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        flexShrink: 0
      }}
    >
      <Form.Item noStyle name={fieldName}>
        <Input
          prefix={
            <IconFont
              type="icon-search"
              height={22}
              style={{ marginRight: 2 }}
            />
          }
          placeholder="搜索"
          {...props}
        />
      </Form.Item>
      {onFresh ? (
        <IconFont
          onClick={() => onFresh()}
          width={32}
          height={32}
          type="icon-refresh"
          size={20}
          pointer
        />
      ) : null}
    </div>
  )
}
